<template>
   <view v-if="canShowList.length > 0" class="image-wraper" :style="{ height, width, borderRadius: radius, fontSize }">
        <template>
           <u-image
                v-if="canShowList.length === 1"
                :key="canShowList[0]"
                :lazy-load="true"
                :showLoading="true"
                :src="canShowList[0]"
                mode="aspectFill"
                :height="height"
                :width="width"
				:radius="radius"
				shape="square"
                @click="previewImage()"
                class="image"
            ><view slot="error" style="background-color: #ECA242;" :style="{height,width}"></view></u-image>
            <u-swiper
				v-else
				:list="canShowList"
				@change="e => (current = e.current)"
				:height="height"
				:width="width"
				:radius="radius"
				:autoplay=false
				imgMode="aspectFill"
				indicator
				indicatorMode="line"
				circular
				@click="previewImage"
				class="image"
            >
                <view slot="indicator" class="indicator">
                    <view class="indicator__dot" v-for="(item, index) in canShowList" :key="index" :class="[index === current && 'indicator__dot--active']"></view>
                </view>
            </u-swiper>
        </template>
    </view>
    <view v-else-if="needNoImage || canShowList.length == 0" class="image-wraper">
        <view class="no-image" :style="{ height, width, borderRadius: radius, fontSize }" >
          <!--  <text class="text">暂</text>
            <text class="text">无</text>
            <text class="text">图</text>
            <text class="text">片</text> -->
        </view>
    </view>
</template>

<script>
	// 这个组件有问题 别用
	export default {
		name:"base-swiper",
		props: {
		        list: {
		            type: Array,
		            default: '',
		            required: false
		        },
		        width: {
		            type: String,
		            default: '100%',
		            required: false
		        },
		        height: {
		            type: String,
		            default: '400rpx',
		            required: false
		        },
		        needNoImage: {
		            type: Boolean,
		            default: false,
		            required: false
		        },
		        fontSize: {
		            type: String,
		            default: '32rpx',
		            required: false
		        },
		        radius: {
		            type: String,
		            default: '15rpx',
		            required: false
		        } 
		    },
			watch: {
				list: {
					handler() {
						const imageList = this.list;
						if (imageList && imageList.length > 0) {
							imageList.forEach(item => {
								if(item.startsWith('http')){
									this.canShowList.push(item)
								}else{
									this.canShowList.push(this.$settings.imgBaseURL + item);
								}
							    
							});
							
						} else {
							this.canShowList = [];
						}
						
					},
					immediate: true,
					deep: true
				}
			},
		data() {
			return {
				current: 0,
				canShow: ['jpg', 'jpeg', 'png', 'bmp', 'gif', 'JPG', 'JPEG', 'PNG', 'BMP', 'GIF'],
				canShowList: []
			};
		},
		 methods: {
		        previewImage(index = 0) {
		            // uni.previewImage({
		            //     current: index,
		            //     indicator: 'number',
		            //     loop: true,
		            //     urls: this.canShowList
		            // });
		        }
		    },
	}
</script>

<style lang="less">
.image-wraper {
    background-color: #f1f2f5;
    // border-radius: 25rpx;
	
    overflow: hidden;
    display: inline-block;
    height: 100%;
    width: 100%;
    z-index: 0;

    & .no-image {
        align-items: center;
        justify-content: center;
        flex-wrap: wrap;
        display: flex;
        padding: 15rpx;
        width: calc(100% - 30rpx);
		// background-color: #ECA242;
        & .text {
            color: #ccc;
            text-align: center;
            width: 40%;
        }
    }
	/deep/.u-swiper__wrapper__item__wrapper{
		flex-direction: column!important;
	}
	/deep/
	.u-swiper__wrapper__item__wrapper{
		flex-direction: column!important;
	}
	.u-swiper__wrapper__item__wrapper{
		flex-direction: column!important;
	}
}



image {
	margin: auto!important;
}
</style>

<style lang="scss">
    .indicator {
        display: flex;
		flex-direction: row;
        justify-content: center;

        &__dot {
             height: 6px;
             width: 6px;
             border-radius: 100px;
             background-color: rgba(255, 255, 255, 0.35);
             margin: 0 5px;
             transition: background-color 0.3s;
    
            &--active {
                 background-color: #ffffff;
             }
        }
    }

    .indicator-num {
        padding: 2px 0;
        background-color: rgba(0, 0, 0, 0.35);
        border-radius: 100px;
        width: 35px;
        display: flex;
        justify-content: center;

        &__text {
             color: #FFFFFF;
             font-size: 12px;
         }
    }
</style>
